<!-- pages/rank/index.vue -->
<template>
  <tm-app>
    <view class="flex flex-row flex-row-center-between flex-1 p-2 border-1" v-for="item, index in rankList" :key="index">
      <tm-text>{{ index }}</tm-text>
      <tm-image :width="200" :height="100" :src="item.cover"></tm-image>
      <tm-text :label="'image-Row-' + item.index"></tm-text>
    </view>
  </tm-app>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 模拟数据生成
const generateSong = (index) => ({
  id: index + 1,
  name: `热门歌曲${index + 1}`,
  artist: `歌手${String.fromCharCode(65 + (index % 26))}`,
  cover: `https://i0.pickpik.com/photos/298/434/513/beach-dawn-dusk-ocean-thumb.jpg`,
  playCount: (Math.random() * 1000 + 500).toFixed(0),
  rise: index % 4 === 0 ? (Math.random() * 50 + 1).toFixed(0) : null
})

const rankList = ref(Array.from({ length: 50 }, (_, i) => generateSong(i)))


const pxToRpx = (px: number) => {
  const { windowWidth } = uni.getSystemInfoSync();
  const rpx = (750 / windowWidth) * px;
  return Math.floor(rpx);
}
const winHeight = pxToRpx(uni.getSystemInfoSync().windowHeight)

// 获取更新时间
const updateDate = computed(() => {
  const date = new Date()
  return `${date.getMonth() + 1}月${date.getDate()}日`
})

// 播放歌曲
const playSong = (song) => {
  uni.showToast({
    title: `播放：${song.name}`,
    icon: 'none'
  })
}

// 排名样式处理
const getRankClass = (rank) => {
  return {
    'text-gradient text-gradient--red': rank === 1,
    'text-gradient text-gradient--orange': rank === 2,
    'text-gradient text-gradient--yellow': rank === 3
  }
}

const getBadgeColor = (rank) => {
  return ['red', 'orange', 'yellow'][rank - 1] || 'grey'
}

const getRankIcon = (rank) => {
  return ['tmicon-trophy-fill', 'tmicon-medal-fill', 'tmicon-award-fill'][rank - 1]
}
</script>

<style lang="scss" scoped>
.rank-num {
  font-weight: bold;

  &.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

    &--red {
      background-image: linear-gradient(45deg, #ff4545, #ff944d);
    }

    &--orange {
      background-image: linear-gradient(45deg, #ff944d, #ffc107);
    }

    &--yellow {
      background-image: linear-gradient(45deg, #ffc107, #ffd700);
    }
  }
}

.pl-20 {
  padding-left: 20rpx;
}

.mb-10 {
  margin-bottom: 10rpx;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.relative {
  position: relative;
}
</style>
